<template>
	<view class="content">
		<view class="topContent">
			<video :src="topVideoUrl" autoplay controls  v-if="topVideoUrl"></video>
			<image :src="topImgUrl" mode="aspectFill"  v-else @click="previewImg(topImgUrl)"></image>
		</view>
		
		<view class="aboutMe">
			<view class="phone">
				<image class="icons" src="../../static/images/icon/phone.png" ></image>
				<text>联系电话</text><text>13005302280</text>
			</view>
			<view class="phone">
				<image class="icons" src="../../static/images/icon/phone.png" ></image>
				<text>服务电话</text><text>0200-565620</text>
			</view>
			<view class="phone">
				<image class="icons" src="../../static/images/icon/weixin.png" ></image>
				<text>公众号</text><text>关注我们</text>
			</view>
			<view class="phone">
				<image class="icons" src="../../static/images/icon/weixin.png" ></image>
				<text>小程序码</text>
				<image class="code" src="../../static/images/icon/qrcode.png" mode=""></image>
			</view>
			<view class="phone">
				<image class="icons" src="../../static/images/icon/net.png" ></image>
				<text>网站</text><text>www.baidu.com</text>
			</view>
			<view class="phone">
				<image class="icons" src="../../static/images/icon/adds.png" ></image>
				<text>地址</text><text>创意空间</text>
			</view>
			<view class="ql-editor">
				<u-parse :content="article" @preview="preview" @navigate="navigate" />
				<view class="qrcode">
					<image :src="qr_url" class="qrcode-image" mode="widthFix" @click="previewImg(qr_url)"></image>
				</view>
			</view>	
		</view>
		
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		components: {
		    uParse
		  },
		data() {
			return {
				brandId:'',
				topVideoUrl:'',
				topImgUrl:'',
				article: '',
				qr_url:''
			}
		},
		onLoad(options) {
			this.brandId=options.brandId;
			this.getBrandDetail()
		},
		onShareAppMessage(){
		   return {
		    title: '明媒品牌',
		    desc:'明媒品牌'
		  }
		},
		methods: {
			preview(src, e) {
			      // do something
			    },
			navigate(href, e) {
			  // do something
			},
			previewImg(url){
				uni.previewImage({
					current:url,
					urls:[url]
				})
			},
			async getBrandDetail(){
				//获取品牌详情
				let parmas={brand_id:this.brandId};
				let res=await this.$api.getBrandDetail(parmas);
				if(res.data.level=='success'){
					let data=res.data.data
					
					setTimeout(()=>{
						this.article=data.content;
					},500)
					// this.topVideoUrl='http://file.rzkeji.com//web/shanghui/uploads/2019/10/9/49f3bf306fc60151686a12b9923d4664.mp4'
					 if(data.video_url){
						this.topVideoUrl=data.video_url;
					}else{
						this.topImgUrl=data.img_url;
					}
					this.qr_url=data.qr_url
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import'~@/common/scss/common.scss';
	.content{
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
	}
	.aboutMe{
		position: relative;
		top: 600rpx;
		left: 0;
		padding-bottom: 50rpx;
	}
	.phone{
		padding-top: 40rpx;
	}
	text{
		padding: 0 100rpx 0 20rpx;
	}
	.code{
		width: 100rpx;
		height: 100rpx;
		vertical-align: middle;
	}
	.icons{
		width: 56rpx;
		height: 56rpx;
		vertical-align: middle;
	}
	.topContent{
		width: 100%;
		position: fixed;
		top:0;
		z-index: 100;
		video{
			width: calc(100% - 40rpx);
			height: 500rpx;
		}
		image{
			width: calc(100% - 40rpx);
			height: 500rpx;
			border-radius: 10rpx;
		}
	}
	.contente-parse{
		margin-top:540rpx;
		height: calc(100vh - 600rpx);
	}
	.qrcode{
		margin-top:40rpx;
		margin-bottom: 60rpx;
		display: flex;
		justify-content: center;
		.qrcode-image{
			width: 320rpx;
			height: 320rpx;
		}
	}
</style>
